<template>
	<el-dialog title="挂单记录" :visible.sync="visible" width="1200px">
		<div class="el-box">
			<div class="list-box" id="list-box">
				<el-table :data="list" v-loading="loading" stripe style="width: 100%;"
					header-row-class-name="headcss">
					<el-table-column prop="Owner" label="地址" align="center">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.Owner" placement="right">
							      <p style="cursor: pointer;">{{ addrStr(scope.row.Owner,8) }}</p>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column prop="Id" label="编号" align="center"></el-table-column>
					<el-table-column prop="Level" label="等级" align="center"></el-table-column>
					<el-table-column prop="Mint" label="收益比例" align="center">
						<template slot-scope="scope">
							{{scope.row.Mint +'%'}}
						</template>
					</el-table-column>
					<el-table-column prop="Price" label="价值" align="center"></el-table-column>
					<el-table-column  label="状态" align="center">
						<template slot-scope="scope">
							{{shoseStr(scope.row)}}
						</template>
					</el-table-column>
					<el-table-column prop="OwnTime" label="购买日期" align="center"></el-table-column>
				</el-table>
			</div>
			<div class="page-limit">
				<el-pagination @current-change="CurrentChange" :current-page="currentPage"
					:page-size="size" layout="total, prev, pager, next"
					:total="total">
				</el-pagination>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {userRecord} from '@/utils/api'
	export default {
		data() {
			return {
				visible: false,
				list: [],
				loading: false,
				currentPage:1,
				size:10,
				total:0,
				addr:''
			}
		},
		methods:{
			async _userRecord(){
				let params = {
					addr:this.addr,
					size:this.size,
					option:'onsale-record',
					page:this.currentPage-1
				}
				this.loading=true
				let {data,response} = await userRecord(params)
				let {total,dataList} = data
				this.loading = false
				this.total = total
				this.list = dataList
			},
			open(addr){
				this.addr = addr
				this.visible=true
				this._userRecord()
			},
			CurrentChange(page){
				this.currentPage = page
				this._userRecord()
			},
			addrStr(str,num){
				if(str){
					if(num){
						return str.substring(0,num)+'...'+str.substring(str.length-num,str.length)
					}else{
						return str.substring(0,10)+'...'+str.substring(str.length-10,str.length)
					}
				}else{
					return str
				}
			},
			shoseStr(row){
				if(row.Level==0){
					var beforT = new Date(row.OwnTime).getTime()
					var newT = beforT + 1000 * 60 * 60 * 24 * 30
					var nowT = new Date().getTime()
					var ts = newT - nowT
					var day = Math.floor(ts / (1000 * 60 * 60 * 24))
					if (day > 0) {
						return '正常'
					} else {
						return '过期'
					}
				}else{
					if(row.Running==1){
						return '跑步中'
					}else{
						if(row.SellState==0){
							return '正常'
						}else if(row.SellState==1){
							return '挂单中'
						}else if(row.SellState==2){
							return '合成中'
						}else if(row.SellState==3){
							return '售卖中'
						}
					}
				}
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.el-box{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 600px;
	}
	.list-box{
		flex: 1;
	}
	.page-limit{
		display: flex;
		width: 100%;
		justify-content: center;
		padding-top: 20px;
	}
	
</style>
<style>
	.el-dialog__body{
		padding: 10px 20px 20px!important;
	}
</style>